<template>
  <div class="container">
    <!-- 头部信息 -->
    <div class="titleWrapBox">
      <div class="titleWrap">
        <div @click="backTo" class="backBtn">
          <i class="iconfont iconfanhui1"></i>
        </div>
        <el-row>
          <div class="projectName">
            {{ topInfo.projectName || '--' }}
            <span
              class="projectState"
              :class="{
                greenBack: topInfo.state === 'STARTED',
                greyBack: topInfo.state === 'COMPLETED',
                redBack: topInfo.state === 'STOPPED',
                yellowBack: topInfo.state === 'NOT_STARTED',
              }"
              >{{ topInfo.stateName }}</span
            >
          </div>
        </el-row>
        <el-row class="explain">
          于
          <span>{{ topInfo.date }}</span>
          开工，建设周期{{ topInfo.period }}天
          <span v-show="topInfo.endDay >= 0">，距离计划竣工还剩</span>
          <span v-show="topInfo.endDay < 0">，超出计划竣工</span>
          <span>{{ Math.abs(topInfo.endDay) || '--' }}</span>
          <span>天</span>
        </el-row>
        <el-row class="titleBottom">
          维权公示牌：{{ topInfo.hasUpload }}
          <el-upload
            v-if="companyType === 'SG' && topInfo.hasUpload === '未上传'"
            class="upload-demo inline-block"
            :action="uploadUrl"
            :data="uploadData"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="limitSize"
            accept=".jpg, .jpeg, .png, .PNG, .JPG, .JPEG"
            list-type="picture"
          >
            <el-link type="primary" v-show="isShowUpdate">点击上传</el-link>
          </el-upload>
          <el-upload
            v-if="companyType === 'SG' && topInfo.hasUpload === '已上传'"
            class="upload-demo inline-block"
            :action="uploadUrl"
            :data="uploadData"
            :on-success="changeUploadSuccess"
            :on-error="uploadError"
            :before-upload="limitSize"
            accept=".jpg, .jpeg, .png, .PNG, .JPG, .JPEG"
            list-type="picture"
          >
            <el-link type="primary" v-show="isShowUpdate">点击替换</el-link>
          </el-upload>
          <div class="inline-block previewBox">
            <el-link type="primary" v-show="topInfo.hasUpload === '已上传'"
              >点击预览</el-link
            >
            <el-image
              class="previewImg"
              v-if="topInfo.hasUpload === '已上传'"
              style="width: 56px; height: 20px"
              :src="publicSign.imgUrl"
              :preview-src-list="publicSign.srcList"
            ></el-image>
          </div>
        </el-row>
        <div class="topBtn" v-if="companyType === 'JS'">
          <el-button
            type="danger"
            @click="openDialog('stop')"
            v-show="
              topInfo.state === 'STARTED' ||
              (topInfo.state === 'NOT_STARTED' && isShowUpdate)
            "
            >设置停工</el-button
          >
          <el-button
            type="danger"
            class="greenBack"
            @click="openDialog('over')"
            v-show="
              topInfo.state === 'STARTED' ||
              topInfo.state === 'NOT_STARTED' ||
              (topInfo.state === 'FINISHED' && isShowUpdate)
            "
            >设置竣工</el-button
          >
          <el-button
            type="danger"
            class="greenBack"
            @click="openDialog('againStart')"
            v-show="
              topInfo.state === 'STOPPED' ||
              (topInfo.state === 'NOT_STARTED' && isShowUpdate)
            "
            >设置开工</el-button
          >
          <el-button
            type="danger"
            class="greenBack"
            @click="openDialog('finish')"
            v-show="
              topInfo.state === 'STARTED' ||
              (topInfo.state === 'NOT_STARTED' && isShowUpdate)
            "
            >设置完工</el-button
          >
        </div>
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="mainSection">
      <!-- 左边模块 -->
      <projectDetailKbLeft
        :projectId="projectId"
        :companyType="companyType"
        userType="QY"
        :projectName="topInfo.projectName"
      ></projectDetailKbLeft>
      <!-- <div class="leftSection">        
      </div> -->
      <!-- 右边模块 -->
      <div class="rightSection">
        <!-- 快捷功能盒子和二维码 -->
        <div class="functionAndQrcodeBox clearfix">
          <div class="functionBox fl">
            <p class="modularTitle">快捷功能</p>
            <div class="functionBtn">
              <el-button
                class="commonBut saveBtn"
                icon="iconfont icontianjia"
                @click="addEmployee"
                v-show="isShowAddPeople"
              >
                <span class="opetareText">添加人员</span>
              </el-button>
            </div>
            <div class="functionBtn">
              <el-button
                class="commonBut saveBtn"
                icon="iconfont icontianjia"
                @click="makeSalary"
              >
                <span class="opetareText">工资代发</span>
              </el-button>
            </div>
          </div>
          <div class="qrcodeBox fl">
            <div>
              <span class="color999">项目二维码</span>
              <el-tooltip content="Top center" placement="top" effect="dark">
                <div slot="content">
                  1.使用工匠365app扫一扫即可快速录入人员加入本项目。
                  <br />2.使用和谐用工APP扫一扫可快速查 看项目信息。
                  <br />(建议下载后打印，与维权公示牌一同张贴)
                </div>
                <i class="icon iconfont iconhuabanfuben"></i>
              </el-tooltip>
            </div>
            <div class="qrcodeImg">
              <img :src="qrcodeImgUrl" alt />
            </div>
          </div>
        </div>
        <!-- 代办事项盒子 -->
        <div class="todoBox">
          <p class="modularTitle">待办事项</p>
          <el-tabs v-model="activeName">
            <el-tab-pane label="待处理预警" name="first">
              <div v-if="alertTotal > 0" class="todoContentBox">
                <el-row
                  :gutter="10"
                  v-for="(item, index) of alertData"
                  :key="index"
                >
                  <el-col :span="10">{{ item.alertTime }}</el-col>
                  <el-col :span="10">{{ item.typeName }}</el-col>
                  <el-col
                    :span="4"
                    :class="{
                      dealing: item.state == '处理中',
                      noDeal: item.state == '未处理',
                    }"
                    >{{ item.state }}</el-col
                  >
                </el-row>
                <el-row class="alignCenter moreLink">
                  <el-link type="primary" :underline="false" @click="skipAlert"
                    >查看更多>></el-link
                  >
                </el-row>
              </div>
              <div v-else class="alignCenter noData">暂无待处理预警</div>
            </el-tab-pane>
            <el-tab-pane label="待处理审核" name="second">
              <div v-if="checkTotal > 0" class="todoContentBox">
                <el-row
                  :gutter="10"
                  v-for="(item, index) of checkData"
                  :key="index"
                >
                  <el-col :span="10">{{ item.applyDate }}</el-col>
                  <el-col :span="10">{{ item.name }}</el-col>
                  <el-col
                    :span="4"
                    :class="{
                      dealing: item.statusDesc == '待完善',
                      noDeal: item.statusDesc == '待处理',
                    }"
                    >{{ item.statusDesc }}</el-col
                  >
                </el-row>
                <el-row class="alignCenter moreLink">
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="skipApplyEmployee"
                    >查看更多>></el-link
                  >
                </el-row>
              </div>
              <div v-else class="alignCenter noData">暂无待处理审核</div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 项目基本信息盒子 -->
        <div class="projectInfoBox">
          <div class="clearFix titleBox">
            <p class="modularTitle fl">项目基本信息</p>
            <div class="fr">
              信息不正确？
              <el-link
                type="primary"
                @click="updateProInfo"
                :underline="false"
                v-show="companyType === 'SG' && isShowUpdate"
                >去修改>></el-link
              >
            </div>
          </div>
          <div class="contentBox">
            <ul>
              <li class="ellipsis">
                <label for>建设方：</label>
                <span :title="projectInfo.pcName">{{
                  projectInfo.pcName || '--'
                }}</span>
              </li>
              <li class="ellipsis">
                <label for>施工方：</label>
                <span :title="projectInfo.pbName">{{
                  projectInfo.pbName || '--'
                }}</span>
              </li>
              <li class="ellipsis">
                <label for>投资类别：</label>
                <span>{{ projectInfo.investmentDesc || '--' }}</span>
              </li>
              <li class="ellipsis">
                <label for>所属行业：</label>
                <span>{{ projectInfo.industryName || '--' }}</span>
              </li>
              <li class="ellipsis">
                <label for>工程造价：</label>
                <span>{{ projectInfo.total || '--' }}元</span>
              </li>
              <li class="ellipsis">
                <label for>项目地址：</label>
                <span :title="projectInfo.address">{{
                  projectInfo.address || '--'
                }}</span>
              </li>
            </ul>
            <ul class="borderUl">
              <li>
                <label for>项目负责人：</label>
                <span :title="projectInfo.leader">{{
                  projectInfo.leader || '--'
                }}</span>
              </li>
              <li>
                <label for>联系方式：</label>
                <span :title="projectInfo.leaderTel">{{
                  projectInfo.leaderTel || '--'
                }}</span>
              </li>
            </ul>
            <ul>
              <li>
                <label for>项目经理：</label>
                <span>{{ projectInfo.managerName || '--' }}</span>
              </li>
              <li>
                <label for>联系方式：</label>
                <span>{{ projectInfo.managerTel || '--' }}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 工商保险盒子 -->
        <div class="insuranceBox">
          <div class="titleBox">
            <p class="modularTitle">工伤保险信息</p>
          </div>
          <div class="contentBox">
            <div
              v-if="!hasInsurance && companyType === 'SG'"
              class="noInsurance"
            >
              <p>
                <i class="iconfont iconjingshi"></i>
                <span>请添加工伤保险信息！</span>
              </p>
              <el-button
                v-show="companyType === 'SG'"
                class="commonBut saveBtn addInsurance"
                icon="iconfont icontianjia"
                @click="skipInsurrance"
              >
                <span class="opetareText">添加保险</span>
              </el-button>
            </div>
            <ul v-else>
              <li class="color333 fontBold">首次参保</li>
              <li>
                <label for>参保时间：</label>
                <span>{{ insuranceInfo.insDate || '--' }}</span>
              </li>
              <li class="ellipsis">
                <label for>参保单位：</label>
                <span :title="insuranceInfo.companyName">{{
                  insuranceInfo.companyName || '--'
                }}</span>
              </li>
              <li class="ellipsis">
                <label for>投保单位：</label>
                <span :title="insuranceInfo.bureau">{{
                  insuranceInfo.bureau || '--'
                }}</span>
              </li>
              <li>
                <label for>参保人数：</label>
                <span>{{ insuranceInfo.total || '--' }}</span>
              </li>
              <li v-show="insuranceTotal == 1" class="alignCenter">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="skipInsurrance"
                  >查看更多>></el-link
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      title="设置停工"
      :visible.sync="formStopVisible"
      :close-on-click-modal="false"
      @close="closeDialog('stop')"
      custom-class="brand-dialog-min-width"
      width="640px"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form
        :model="formDataStop"
        label-width="80px"
        :rules="formRulesStop"
        ref="formDataStop"
      >
        <el-form-item label="停工日期" prop="operateDate">
          <el-date-picker
            type="date"
            placeholder="请选择停工开始的日期"
            v-model="formDataStop.operateDate"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="停工原因" prop="operateReason">
          <el-input
            type="textarea"
            rows="3"
            class="mWidth"
            v-model="formDataStop.operateReason"
            autocomplete="off"
            placeholder="请输入停工原因"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelEdit('stop')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="updateProjectState('stop', 'formDataStop')"
          class="save"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="设置竣工"
      :visible.sync="formOverVisible"
      :close-on-click-modal="false"
      @close="closeDialog('over')"
      custom-class="brand-dialog-min-width"
      width="32%"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form
        :model="formDataOver"
        label-width="80px"
        :rules="formRulesOver"
        ref="formDataOver"
      >
        <el-form-item label="竣工日期" prop="operateDate">
          <el-date-picker
            type="date"
            placeholder="请选择项目实际竣工的日期"
            v-model="formDataOver.operateDate"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="竣工原因" prop="operateReason">
          <el-input
            type="textarea"
            v-model="formDataOver.operateReason"
            autocomplete="off"
            placeholder="请输入竣工原因"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelEdit('over')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="updateProjectState('over', 'formDataOver')"
          class="save"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="恢复开工"
      :visible.sync="formAgainStartVisible"
      :close-on-click-modal="false"
      @close="closeDialog('againStart')"
      custom-class="brand-dialog-min-width"
      width="32%"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form
        :model="formDataAgainStart"
        label-width="80px"
        :rules="formRulesAgainStart"
        ref="formDataAgainStart"
      >
        <el-form-item label="恢复日期" prop="operateDate">
          <el-date-picker
            type="date"
            placeholder="请选择开工开始的日期"
            v-model="formDataAgainStart.operateDate"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="恢复原因" prop="operateReason">
          <el-input
            type="textarea"
            v-model="formDataAgainStart.operateReason"
            autocomplete="off"
            placeholder="请输入恢复原因"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelEdit('againStart')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="updateProjectState('start', 'formDataAgainStart')"
          class="save"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="设置完工"
      :visible.sync="formFinishVisible"
      :close-on-click-modal="false"
      @close="closeDialog('finish')"
      custom-class="brand-dialog-min-width"
      width="32%"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form
        :model="formDataFinish"
        label-width="80px"
        :rules="formRulesFinish"
        ref="formDataFinish"
      >
        <el-form-item label="完工日期" prop="operateDate">
          <el-date-picker
            type="date"
            placeholder="请选择项目实际完工的日期"
            v-model="formDataFinish.operateDate"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="完工原因" prop="operateReason">
          <el-input
            type="textarea"
            v-model="formDataFinish.operateReason"
            autocomplete="off"
            placeholder="请输入完工原因"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelEdit('finish')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="updateProjectState('finish', 'formDataFinish')"
          class="save"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '../../kits/common'
import projectDetailKbLeft from '@/components/publicCom/projectDetailKbLeft'

export default {
  name: 'projectDetailQY',
  components: {
    projectDetailKbLeft,
  },
  data() {
    return {
      formStopVisible: false, //设置停工弹框
      formOverVisible: false, //设置竣工弹框
      formAgainStartVisible: false, //恢复开工
      formDataStop: {
        operateDate: '',
        operateReason: '',
      },
      formRulesStop: {
        operateDate: [
          {
            required: true,
            message: '停工日期不能为空',
            trigger: 'change',
          },
        ],
        operateReason: [
          {
            required: true,
            message: '请输入停工原因',
            trigger: 'blur',
          },
        ],
      },
      formDataOver: {
        operateDate: '',
        operateReason: '',
      },
      formRulesOver: {
        operateDate: [
          {
            required: true,
            message: '竣工日期不能为空',
            trigger: 'change',
          },
        ],
        operateReason: [
          {
            required: true,
            message: '请输入竣工原因',
            trigger: 'blur',
          },
        ],
      },
      formDataAgainStart: {
        operateDate: '',
        operateReason: '',
      },
      formRulesAgainStart: {
        operateDate: [
          {
            required: true,
            message: '恢复日期不能为空',
            trigger: 'change',
          },
        ],
        operateReason: [
          {
            required: true,
            message: '请输入恢复原因',
            trigger: 'blur',
          },
        ],
      },
      formFinishVisible: false,
      formDataFinish: {
        operateDate: '',
        operateReason: '',
      },
      formRulesFinish: {
        operateDate: [
          {
            required: true,
            message: '完工日期不能为空',
            trigger: 'change',
          },
        ],
        operateReason: [
          {
            required: true,
            message: '请输入完工原因',
            trigger: 'blur',
          },
        ],
      },
      projectId: '', //列表id4201011
      companyType: '', //企业类型 JG建设方 SG施工方
      topInfo: {
        projectName: '',
        state: '',
        stateName: '',
        date: '',
        period: '',
        endDay: '',
        hasUpload: '', //维权公示牌是否上传
      },
      publicSign: {
        imgUrl: '', //公示牌路径
        srcList: [], //
      },
      qrcodeImgUrl: '',
      uploadUrl: '',
      changeUploadUrl: '', //替换公示牌
      uploadData: {
        projectId: '', //公示牌传项目id
      },
      pickerOptions: this.processDate(),
      path: '',
      activeName: 'first',
      alertTotal: 0,
      checkTotal: 0,
      alertData: [],
      checkData: [],
      projectInfo: {},
      hasInsurance: false,
      insuranceTotal: 0,
      insuranceInfo: {},
      isShowAddPeople: '',
      isShowUpdate: '',
    }
  },
  created() {
    if (this.$route.query.path == 'projectDetailQY') {
      this.$store.commit('set_active_index', '/home/project/projectListQY')
      this.$store.state.activeMenu = '/home/project/projectListQY'
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/projectListQY',
        newUrl: this.$router.currentRoute.fullPath,
      })
    }
    //获取参数（项目id，企业类型：建设方还是施工方）
    this.projectId = this.$route.query.projectId || ''
    this.companyType = this.$route.query.companyType || ''
    this.path = this.$route.query.path || ''

    // 上传图片路径
    this.uploadUrl = common.commonApi + 'api-f/files/upload'

    this.$nextTick(function () {
      //公示牌参数
      this.uploadData.projectId = this.projectId
      //二维码路径
      this.qrcodeImgUrl =
        common.commonApi + 'api-p/project/base/qrimage?info=' + this.projectId
      //获取预警信息
      this.getAlertInfo()
      //获取待处理审核数据
      this.getCheckInfo()
      //获取项目详情信息
      this.getProjectInfo()
      //获取工伤保险信息
      this.getInsurranceInfo()
      //获取公示牌
      this.getPublicSign()
      this.isShowAddPeople =
        this.$store.state.buttonLimitsArr.indexOf('csRoster:add') > -1
      this.isShowUpdate =
        this.$store.state.buttonLimitsArr.indexOf('projectList:update') > -1 ||
        this.$store.state.buttonLimitsArr.indexOf('projectListJSF:update') >
          -1 ||
        this.$store.state.buttonLimitsArr.indexOf('projectListSGF:update') > -1
    })
  },
  methods: {
    openDialog(getParams) {
      if (getParams == 'stop') {
        this.formStopVisible = true
      } else if (getParams == 'over') {
        this.formOverVisible = true
      } else if (getParams == 'againStart') {
        this.formAgainStartVisible = true
      } else if (getParams == 'finish') {
        this.formFinishVisible = true
      }
    },
    //关闭停工弹窗
    closeDialog(getParams) {
      if (getParams == 'stop') {
        this.$refs.formDataStop.resetFields()
      } else if (getParams == 'over') {
        this.$refs.formDataOver.resetFields()
      } else if (getParams == 'againStart') {
        this.$refs.formDataAgainStart.resetFields()
      } else if (getParams == 'finish') {
        this.$refs.formDataFinish.resetFields()
      }
    },
    //停工弹框取消
    cancelEdit(getParams) {
      if (getParams == 'stop') {
        this.formStopVisible = false
        this.$refs.formDataStop.resetFields()
      } else if (getParams == 'over') {
        this.formOverVisible = false
        this.$refs.formDataOver.resetFields()
      } else if (getParams == 'againStart') {
        this.formAgainStartVisible = false
        this.$refs.formDataAgainStart.resetFields()
      } else if (getParams == 'finish') {
        this.formFinishVisible = true
        this.$refs.formDataFinish.resetFields()
      }
    },
    //保存恢复开工、竣工、停工 参数（表单状态，表单名字）
    updateProjectState(status, formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //传值后台
          var data = ''
          if (status === 'start') {
            //恢复开工
            data = {
              projectId: this.projectId,
              status: 'STARTED',
              date: this.formDataAgainStart.operateDate,
              reason: this.formDataAgainStart.operateReason,
            }
          }
          if (status === 'stop') {
            //设置停工
            data = {
              projectId: this.projectId,
              status: 'STOPPED',
              date: this.formDataStop.operateDate,
              reason: this.formDataStop.operateReason,
            }
          }
          if (status === 'over') {
            //恢复竣工
            data = {
              projectId: this.projectId,
              status: 'COMPLETED',
              date: this.formDataOver.operateDate,
              reason: this.formDataOver.operateReason,
            }
          }
          if (status === 'finish') {
            //设置完工
            data = {
              projectId: this.projectId,
              status: 'FINISHED',
              date: this.formDataFinish.operateDate,
              reason: this.formDataFinish.operateReason,
            }
          }
          this.updateStateAjax(status, data)
        } else {
          return false
        }
      })
    },
    //保存恢复开工、竣工、停工表单
    updateStateAjax(status, data) {
      this.axios({
        method: 'post',
        url: 'api-p/projectstatus/expand/changestatus',
        data: data,
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.$message({
                message: '设置成功',
                type: 'success',
              })
              this.$nextTick(function () {
                //关闭弹窗
                if (status === 'start') {
                  //恢复开工
                  //获取项目详情
                  this.getProjectInfo()
                  this.formAgainStartVisible = false
                  this.$refs.formDataAgainStart.resetFields()
                }
                if (status === 'stop') {
                  //设置停工
                  //获取项目详情
                  this.getProjectInfo()
                  this.formStopVisible = false
                  this.$refs.formDataStop.resetFields()
                }
                if (status === 'over') {
                  //恢复竣工
                  //获取项目详情
                  this.getProjectInfo()
                  this.formOverVisible = false
                  this.$refs.formDataOver.resetFields()
                }
                if (status === 'finish') {
                  //恢复竣工
                  //获取项目详情
                  this.getProjectInfo()
                  this.formFinishVisible = false
                  this.$refs.formDataFinish.resetFields()
                }
              })
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    //返回
    backTo() {
      this.$router.push('/home/project/projectListQY')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/projectListQY',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 跳转修改项目信息页面
    updateProInfo() {
      this.$router.push({
        path: '/home/companyProjectManage/companyProjectInfoUpd',
        name: 'companyProjectInfoUpd',
        query: {
          projectId: this.projectId,
          companyType: this.companyType,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/projectListQY',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //上传公示牌失败
    uploadError() {
      this.$message({
        message: '上传失败',
        type: 'error',
      })
    },
    //上传公示牌成功将图片返给后台
    uploadSuccess(file) {
      //重新将图片信息传给后台
      this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/uploadpublic',
        data: {
          file: JSON.stringify(file),
          projectId: this.projectId,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.$message({
                message: '上传成功',
                type: 'success',
              })
              this.topInfo.hasUpload = '已上传'
              this.publicSign.imgUrl = file.url
              this.publicSign.srcList = []
              this.publicSign.srcList.push(file.url)
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    //替换成功将图片返给后台
    changeUploadSuccess(file) {
      //重新将图片信息传给后台
      this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/reuploadpublic',
        data: {
          file: JSON.stringify(file),
          projectId: this.projectId,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.$message({
                message: '上传成功',
                type: 'success',
              })
              this.publicSign.imgUrl = file.url
              this.publicSign.srcList = []
              this.publicSign.srcList.push(file.url)
            } else {
              this.$message({
                message: '替换失败',
                type: 'success',
              })
            }
          },
          (res) => {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    //获取项目详情
    getProjectInfo() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/projectdetail',
        data: {
          projectId: this.projectId,
        },
      })
        .then(
          (res) => {
            var data = res.data.result
            this.topInfo.projectName = data.projectName
            this.topInfo.state = data.status
            this.topInfo.stateName = data.statusDesc
            this.topInfo.date = data.startDate
            this.topInfo.period = data.cycle
            this.topInfo.endDay = data.disDate
            //项目详情
            this.projectInfo = data
          },
          (res) => {
            this.$message({
              message: '加载详情失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    //获取公示牌
    getPublicSign() {
      this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/showpublic',
        data: {
          projectId: this.projectId,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              //如果为true，则未上传公示牌
              this.topInfo.hasUpload = '已上传'
              var data = res.data.result
              this.publicSign.imgUrl = data.absolutePath
              this.publicSign.srcList.push(data.absolutePath)
            } else {
              this.topInfo.hasUpload = '未上传'
            }
          },
          (res) => {
            this.$message({
              message: '加载公示牌失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    //添加人员
    addEmployee() {
      this.$router.push({
        name: 'projectEmployeeQY',
        path: '/home/employee/projectEmployeeQY',
        query: {
          projectId: this.projectId,
          projectName: this.topInfo.projectName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/employee/projectEmployeeQY',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 弹框竣工，停工中日期限制
    processDate() {
      var that = this
      return {
        disabledDate(time) {
          var hiringTime = that.topInfo.date.toString()
          // 解决在ie中的兼容问题 需要转成/
          hiringTime = hiringTime.replace(/\./g, '/')
          if (hiringTime) {
            return time.getTime() < new Date(hiringTime).getTime()
          }
        },
      }
    },
    //限制公示牌大小
    limitSize(file) {
      let types = file.type.split('/')
      if (!['png', 'jpg', 'jpeg', 'PNG', 'JPG', 'JPEG'].includes(types[1])) {
        this.$message({
          message: `请选择png，jpg，jpeg的图片`,
          type: 'warning',
        })
        return false
      }
      if (file.size > 5 * 1024 * 1024) {
        this.$message.error('请上传5M以内的图片')
        return false
      }
    },

    //制作工资表
    makeSalary() {
      this.$router.push({
        name: 'companySalaryBatchList',
        path: '/home/salaryDf/companySalaryBatchList',
        query: {
          projectId: this.projectId,
          projectName: this.topInfo.projectName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salaryDf/companySalaryBatchList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //分配权限
    rightManage() {},
    //获取预警数据
    getAlertInfo() {
      this.axios({
        method: 'post',
        url: 'api-a/cs/alert/expand/company/listbypage',
        data: {
          projectId: this.projectId,
          pageSize: 4,
          pageNo: 1,
          status: '01', //未处理
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.alertTotal = res.data.result.total
              this.alertData = res.data.result.results
            } else {
              this.$message.error('预警数据获取失败')
            }
          },
          (res) => {
            this.$message.error('预警数据获取失败')
          }
        )
        .catch((error) => {
          this.$message.error('预警数据获取失败')
        })
    },
    //跳转预警
    skipAlert() {
      this.$router.push({
        name: 'constructAlertProjectList',
        path: '/home/project/constructAlertProjectList',
        query: {
          projectId: this.projectId,
          status: '01',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/constructAlertProjectList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //获取待审核数据
    getCheckInfo() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/application/expend/listbypage',
        data: {
          projectId: this.projectId,
          pageSize: 4,
          pageNo: 1,
          status: 'AUDIT', //未处理
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.checkTotal = res.data.result.total
              this.checkData = res.data.result.results
            } else {
              this.$message.error('待审核数据获取失败')
            }
          },
          (res) => {
            this.$message.error('待审核数据获取失败')
          }
        )
        .catch((error) => {
          this.$message.error('待审核数据获取失败')
        })
    },
    //跳转人员申请
    skipApplyEmployee() {
      this.$router.push({
        name: 'projectEmployeeApply',
        path: '/home/employee/projectEmployeeApply',
        query: {
          projectId: this.projectId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/employee/projectEmployeeApply',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //获取工伤保险数据
    getInsurranceInfo() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/ins/expand/inslist',
        data: {
          projectId: this.projectId,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.insuranceTotal = res.data.result.length
              if (res.data.result.length > 0) {
                this.hasInsurance = true
                this.insuranceInfo = res.data.result[0]
              } else {
                this.hasInsurance = false
              }
            } else {
              this.$message.error('工伤保险数据获取失败')
            }
          },
          (res) => {
            this.$message.error('工伤保险数据获取失败')
          }
        )
        .catch((error) => {})
    },
    //跳转工伤保险
    skipInsurrance() {
      this.$router.push({
        name: 'insurance',
        path: '/home/insurance/insurance',
        query: {
          projectId: this.projectId,
          projectName: this.topInfo.projectName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/insurance/insurance',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    numberFormat(value) {
      var param = {}
      var k = 10000,
        sizes = ['', '万', '亿'],
        len = sizes.length,
        i
      if (value < k) {
        param.value = value
        param.unit = ''
      } else {
        i = Math.floor(Math.log(value) / Math.log(k))
        i = i > len - 1 ? len - 1 : i
        param.value = (value / Math.pow(k, i)).toFixed(2)
        param.unit = sizes[i]
      }
      return param.value + param.unit
    },
  },
}
</script>

<style scoped lang="less">
.greenBack {
  background-color: #009588;
}
.greyBack {
  background-color: #647382;
}
.redBack {
  background-color: #db534b;
}
.yellowBack {
  background-color: #ffc200;
}
.font16 {
  font-size: 16px;
}
.titleBox {
  border: none;
}

.modularTitle {
  font-size: 18px;
  line-height: 18px;
  color: #333;
}
.inline-block {
  display: inline-block;
}
.lineH67 {
  line-height: 67px;
}

.container {
  // min-width: 1147px;
  overflow-y: auto;
  //background:grey;
  .titleWrapBox {
    padding: 0 24px;
  }
  .titleWrap {
    background: #fff;
    border-bottom: 1px solid #e3e7e9;
    padding: 16px 0px 24px 24px;
    position: relative;
    font-size: 14px;
    color: #333;
    position: relative;
    .backBtn {
      position: absolute;
      cursor: pointer;
      left: 0px;
      top: 23px;
      font-size: 18px;
      font-weight: bold;
      width: 18px;
      height: 24px;
      margin-right: 6px;
      .iconfanhui1 {
        margin-right: 0;
      }
    }
    .projectName {
      font: bold 18px Microsoft YaHei;
      color: #333333;
      line-height: 20px;
      margin-bottom: 10px;
      .projectState {
        display: inline-block;
        width: 60px;
        height: 20px;
        font-size: 12px;
        color: #fff;
        text-align: center;
        margin-left: 10px;
        font-weight: normal;
      }
    }
    .explain {
      font-size: 14px;
      color: #666;
    }
    .titleBottom {
      line-height: 20px;
      height: 20px;
    }
    .topBtn {
      position: absolute;
      top: 40px;
      right: 120px;
      .greenBack {
        border-color: #009588;
      }
    }
    .gradeImgBox {
      position: absolute;
      top: 20px;
      right: 24px;
      .gradeImgCss {
        width: 80px;
        height: 80px;
      }
    }
    .previewBox {
      width: 56px;
      height: 20px;
      position: relative;
      .previewImg {
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        /deep/.el-image__preview {
          opacity: 0;
        }
      }
    }
    /deep/.el-upload-list {
      display: none;
    }
  }
  .mainSection {
    position: relative;
    padding: 24px 24px;
    .rightSection {
      height: 1000px;
      position: absolute;
      right: 0px;
      top: 0px;
      width: 422px;
      // 快捷功能+二维码
      .functionAndQrcodeBox {
        height: 230px;
        .functionBox {
          width: 223px;
          height: 100%;
          margin-right: 10px;
          padding: 20px 32px;
          background-color: #fff;
          .functionBtn {
            margin-top: 20px;
            .el-button {
              width: 158px;
              height: 60px;
              -webkit-border-radius: 8px;
              -moz-border-radius: 8px;
              -o-border-radius: 8px;
              border-radius: 8px;
              font-size: 20px;
              /deep/.iconfont {
                margin-right: 10px;
              }
            }
          }
        }
        .qrcodeBox {
          width: 189px;
          height: 100%;
          text-align: center;
          padding: 20px 12px;
          padding-bottom: 14px;
          background-color: #fff;
          font-size: 14px;
          img {
            width: 165px;
            height: 165px;
            margin-top: 10px;
          }
        }
      }
      // 代办事项
      .todoBox {
        width: 422px;
        height: 288px;
        margin-top: 10px;
        background-color: #ffffff;
        position: relative;
        /deep/.el-tabs {
          .el-tabs__nav-wrap {
            height: 58px;
            padding: 0 32px;
            padding-top: 6px;
            // background: #E4EBF1;
            .el-tabs__item {
              color: #666;
            }
            .el-tabs__item.is-active {
              color: #009588;
            }
            .el-tabs__active-bar {
              background-color: #009588;
            }
            .el-tabs__nav {
              float: right;
            }
          }
          .el-tabs__nav-wrap::after {
            display: none;
          }
        }
        .modularTitle {
          position: absolute;
          left: 32px;
          top: 19px;
          z-index: 100;
        }
        .noData {
          margin-top: 80px;
        }
        .todoContentBox {
          padding: 0 16px;
          font-size: 14px;
          .el-row {
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            .dealing {
              color: #ffb649;
            }
            .noDeal {
              color: #e02020;
            }
          }
          .el-row:nth-child(odd) {
            background: #f5f7fb;
          }
          .moreLink {
            background: #fff !important;
            border-top: 1px solid #d5dee7;
            line-height: 50px;
          }
        }
      }
      //项目信息盒子
      .projectInfoBox,
      .insuranceBox {
        height: 524px;
        background-color: #fff;
        margin-top: 10px;
        font-size: 14px;
        .titleBox {
          height: 58px;
          line-height: 58px;
          padding: 0 32px;
          // background:#E4EBF1;
          margin-bottom: 0px;
          .modularTitle {
            line-height: 58px;
          }
          .el-link {
            vertical-align: top;
          }
        }
        .contentBox {
          padding: 20px 32px;
          ul li {
            height: 32px;
            line-height: 32px;
            label {
              color: #333;
              display: inline-block;
              width: 90px;
              text-align: right;
            }
            span {
              color: #2a2a2a;
            }
          }
          .borderUl {
            border: 1px dotted #d5dee7;
            border-width: 1px 0px;
            margin: 15px 0px;
            padding: 15px 0px;
          }
        }
      }
      .insuranceBox {
        height: 298px;
        position: relative;
        .contentBox {
          ul li {
            label {
              width: 70px;
            }
          }
          .addInsurance {
            position: absolute;
            right: 32px;
            bottom: 24px;
          }
          .noInsurance p {
            color: #e02020;
            font-size: 18px;
            text-align: center;
            margin-top: 45px;
            i {
              font-size: 32px;
              margin-right: 10px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
</style>
